<template>
	<view class="content">
		<u-navbar bgColor="#F5F9FC" :placeholder="true" :border="true" height="48px">
			<view slot="left" class="navbar-left">
				<navigator class="back-button">
					<view class="nav-back-content">
						<view class="nav-title">首页</view>
					</view>
				</navigator>
			</view>
		</u-navbar>

		<!-- 顶部栏 -->
		<view class="top" v-if="isLogin">
			<view class="top-left" style="display: flex;justify-content: space-between;width: 100%;align-items: center;"
				v-if="isBinding">
				<view style="display: flex;align-items: center;">
					<u-icon size="20" color="#3a9af3" name="home-fill"></u-icon>
					<view class="top-title">{{company || '福建建工集团有限责任公司'}}</view>
					<view class="change" @click="switchCom" style="margin-left:8rpx;">切换</view>
				</view>
				<view class="login-box islogin" @click="toAddCompany()">
					<text>新增+</text>
				</view>
			</view>
		</view>
		<!-- <view class="tax-report-section">
			<view class="report-header">
				<view class="report-time">申报时间: 10月01日-10月20日</view>
				<view class="zero-report">
					<text class="zero-text">全零申报</text>
					<u-switch v-model="value" @change="change"></u-switch>
				</view>
			</view>

			<view class="remain-time">剩余 10天6小时9分</view>

			<view class="start-record-btn">开始记账</view>
			<view class="step-bar">
				<view class="step-item">
					<image src="https://api.iconify.design/ic:baseline-history.svg?color=%234889ee&width=48&height=48"
						class="step-icon" mode="widthFix" />
					<view class="step-text-arrow">
						<view class="step-text step-text-active">记账➤</view>
					</view>
				</view>
				<view class="step-line"></view>
				<view class="step-item">
					<image src="https://api.iconify.design/ic:baseline-history.svg?color=%23999999&width=48&height=48"
						class="step-icon" mode="widthFix" />
					<view class="step-text-arrow">
						<view class="step-text">审账➤</view>
					</view>
				</view>
				<view class="step-line"></view>
				<view class="step-item">
					<image src="https://api.iconify.design/ic:baseline-history.svg?color=%23999999&width=48&height=48"
						class="step-icon" mode="widthFix" />
					<view class="step-text-arrow">
						<view class="step-text">报税➤</view>
					</view>
				</view>
				<view class="step-line"></view>
				<view class="step-item">
					<image src="https://api.iconify.design/ic:baseline-history.svg?color=%23999999&width=48&height=48"
						class="step-icon" mode="widthFix" />
					<view class="step-text-arrow">
						<view class="step-text">结果</view>
					</view>
				</view>
			</view>
		</view>
 -->
		<view class="moudle">
			<view class="moudle-left" @click="toPage('/pageNew/pages/tax/index')">
				<view class="moudle-top">
					<view class="title">已报税</view>
					<view class="day">
						<view>本月申报截至</view>
						<view class="red">{{ day }}</view>
						天
					</view>
					<view class="btn">
						<image src="../../static/images/right-blue.png" style="margin-right: 4rpx;"></image>
						<image src="../../static/images/right-blue.png"></image>
					</view>
				</view>
				<image src="../../static/images/shou.png" class="bg-img"></image>
			</view>
			<!-- 右侧模块 -->
			<view class="moudle-right">
				<view class="right-item" style="margin-bottom: 24rpx;" @click="toPage('/pageNew/pages/annual/index')">
					<view style="height: 36rpx;"></view>
					<view class="moudle-top">
						<view class="title">已年审</view>
						<view class="day">
							<view>本月申报截至</view>
							<view class="red">{{ day }}</view>
							天
						</view>
						<view class="btn">
							<image src="../../static/images/right-white.png" style="margin-right: 4rpx;"></image>
							<image src="../../static/images/right-white.png"></image>
						</view>
					</view>
					<image src="../../static/images/failed.png" class="bg-img"></image>
				</view>
				<view class="right-item" @click="toPage('/pageNew/pages/tax-audit/index')">
					<view style="height: 36rpx;"></view>
					<view class="moudle-top">
						<view class="title">已完成税务年审</view>
						<view class="day">
							<view>本月申报截至</view>
							<view class="red">{{ day }}</view>
							天
						</view>
						<view class="btn">
							<image src="../../static/images/right-white.png" style="margin-right: 4rpx;"></image>
							<image src="../../static/images/right-white.png"></image>
						</view>
					</view>
					<image src="../../static/images/success.png" class="bg-img"></image>
				</view>
			</view>
		</view>

		<!-- 管家卡片区（保留原有） -->
		<view class="housekeep-x">
			<view class="housekeep-box" v-for="(item,index) in housekeepxList" @click="toPage(item.url)" :key="index"
				:style="{background: item.gradientBg}">
				<view>
					<view class="housekeep-top"
						style="display: flex;justify-content: space-between;align-items: center;width:180rpx;">
						<text>{{item.title}}</text>
						<view class="img-bg">
							<image :src="item.img" :style="item.imgSize"></image>
						</view>
					</view>
					<view class="housekeep-bottom" style="text-align: start;">{{item.value}}</view>
				</view>
			</view>
		</view>
		<!-- 以下部分完全保留原有代码 -->
		<view class="housekeep-y">
			<view class="housekeep-item" v-for="(item,index) in housekeepyList" :key="index"
				@click="item.url?toPage(item.url):''">
				<view class="housekeep-top">
					<view class="housekeep-title" @click.stop="item.gzurl?toPage(item.gzurl):''">
						<view class="img-bg">
							<image :src="item.img"></image>
						</view>
						<text>{{item.title}}</text>
					</view>
					<view class="housekeep-btn">{{item.btn}}</view>
				</view>
				<view class="housekeep-bottom">
					<view v-for="(data, id) in item.items" :key="id" style="display: flex;align-items: center;">
						<view class="housekeep-child" v-if="data.name != 'line'">
							<view class="child-one">{{data.name}}</view>
							<view class="child-two" v-if="!isLogin">{{data.value}}</view>
							<view :class="data.type == 'black' ? 'black' : data.type == 'orange' ? 'orange' : 'green'"
								v-if="isLogin">{{data.value}}</view>
						</view>
						<view class="line" v-if="id < (item.items.length - 1) && data.name == 'line'"></view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="center" @maskClick="closePop()">
			<view class="pop">
				<view class="top-box">
					<view></view>
					<image src="../../static/images/close.png" @click="closePop()"></image>
				</view>
				<view class="font">请先绑定公司后使用</view>
				<view class="bind-btn" @click="openBingingPop()">去绑定</view>
				<view class="close-btn" @click="closePop()">暂不绑定</view>
			</view>
		</uni-popup>

		<view style="height: 40rpx;"></view>
	</view>
</template>

<script>
	import {
		bindingApi,
		getCompanyApi,
		currentCompanyApi,
		firstBindingApi
	} from "@/api/auth.js"
	export default {
		data() {
			return {
				// 全零申报开关变量
				value: false,
				http: uni.$u.http, // 统一请求实例
				// 管家卡片数据（保留原有）
				housekeepxList: [{
						title: '社保管家',
						url: '/pageNew/pages/salary/index',
						img: '../../static/images/1.png',
						imgSize: 'width:60rpx;height:60rpx',
						value: '已缴费:2000(估)',
						gradientBg: 'linear-gradient(162.59deg, rgba(255, 255, 255, 1) 0%, rgba(235, 253, 255, 1) 100%), rgba(255, 255, 255, 1)'
					},
					{
						title: '公积金管家',
						url: '/pageNew/pages/fund/index',
						img: '../../static/images/2.png',
						imgSize: 'width:60rpx;height:60rpx',
						value: '本月未缴费',
						gradientBg: 'linear-gradient(164.97deg, rgba(255, 255, 255, 1) 0%, rgba(252, 245, 242, 1) 100%)'
					},
					{
						title: '医保管家',
						url: '/pageNew/pages/med/index',
						img: '../../static/images/3.png',
						imgSize: 'width:60rpx;height:60rpx',
						value: '已缴费:2000(估)',
						gradientBg: 'linear-gradient(167.08deg, rgba(255, 255, 255, 1) 0%, rgba(228, 233, 252, 1) 100%), rgba(255, 255, 255, 1)'
					}
				],
				housekeepyList: [{
						title: '工资管家',
						gzurl: '/pageNew/salary/salary',
						btn: '员工管理',
						url: '/pageNew/pages/employee/index',
						img: '../../static/images/money.png',
						items: [{
								name: '员工人数',
								value: '——',
								type: 'black'
							},
							{
								name: 'line'
							},
							{
								name: '应发工资',
								value: '——',
								type: 'orange'
							},
							{
								name: 'line'
							},
							{
								name: '应代交税费',
								value: '——',
								type: 'orange'
							},
						]
					},
					{
						title: '发票管家',
						url: '/pages/invoicemange/invoicemange',
						// gzurl: '/pageNew/pages/invoice/index',
						btn: '开具发票',
						img: '../../static/images/invoice.png',
						items: [{
								name: '已开普票',
								value: '——',
								type: 'black'
							},
							{
								name: 'line'
							},
							{
								name: '已开专票',
								value: '——',
								type: 'black'
							},
							{
								name: 'line'
							},
							{
								name: '免税额度',
								value: '——',
								type: 'black'
							},
						]
					},
					{
						title: '记账管家',
						btn: '记账管理',
						url: '/pageNew/pages/accounting/index',
						img: '../../static/images/acc-housekeep.png',
						items: [{
								name: '收入',
								value: '——',
								type: 'green'
							},
							{
								name: 'line'
							},
							{
								name: '支出',
								value: '——',
								type: 'orange'
							},
							{
								name: 'line'
							},
							{
								name: '利润',
								value: '——',
								type: 'black'
							},
						]
					},
				],
				isLogin: false,
				company: '',
				isBinding: false,
				isShowKf: false,
				companyInfo: {},
				day: 12,
				companyId: null // 新增：存储公司ID
			}
		},
		onShow() {
			this.isLogin = uni.getStorageSync('isLogin')
			if (!this.isLogin) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			}
			if (this.isLogin) {
				this.currentCompany()
				this.companyInfo = uni.getStorageSync('companyInfo')
				this.housekeepxList = this.housekeepxList.map((item, index) => {
					const newItem = {
						...item
					}
					if (index == 0) newItem.value = '已缴费:2000(估)'
					else if (index == 1) newItem.value = '本月未缴费'
					else newItem.value = '已缴费:2000(估)'
					return newItem
				})
				this.housekeepyList = this.housekeepyList.map((item) => {
					const newItem = {
						...item
					}
					newItem.items = newItem.items.map((data) => {
						const newData = {
							...data
						}
						if (data.name != 'line') newData.value = 0
						return newData
					})
					return newItem
				})
			}
		},
		watch: {
			isLogin(newValue, oldValue) {
				this.isLogin = newValue
			}
		},
		methods: {
			// 新增：获取首页汇总数据（工资、发票、记账）
			getHomeSummary() {
				if (!this.companyId) return

				// 按照指定请求方式调用接口
				this.http.get('/home/summary', {
					params: {
						companyId: this.companyId
					}
				}).then(res => {
					if (res.code == 200 && res.data) {
						const {
							salary,
							invoice,
							accounting
						} = res.data

						// 更新工资管家数据
						this.housekeepyList[0].items[0].value = salary.employeeCount || 0
						this.housekeepyList[0].items[2].value = this.formatMoney(salary.totalSalary || 0)
						this.housekeepyList[0].items[4].value = this.formatMoney(salary.taxAmount || 0)

						// 更新发票管家数据
						this.housekeepyList[1].items[0].value = invoice.normalInvoiceCount || 0 + '张'
						this.housekeepyList[1].items[2].value = invoice.specialInvoiceCount || 0 + '张'
						this.housekeepyList[1].items[4].value = this.formatMoney(invoice.taxFreeAmount || 0)

						// 更新记账管家数据
						this.housekeepyList[2].items[0].value = this.formatMoney(accounting.income || 0)
						this.housekeepyList[2].items[2].value = this.formatMoney(accounting.expenditure || 0)
						this.housekeepyList[2].items[4].value = this.formatMoney(accounting.profit || 0)
					}
				}).catch(err => {
					console.error('获取首页汇总数据失败', err)
				})
			},

			// 新增：金额格式化（保留两位小数）
			formatMoney(num) {
				return num.toFixed(2)
			},

			// 全零申报开关change事件
			change() {
				// 可添加业务逻辑
			},

			toPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			switchCom() {
				uni.navigateTo({
					url: '/pages/company/company'
				})
			},
			closePop() {
				this.$refs.popup.close()
			},
			toAddCompany() {
				uni.navigateTo({
					url: '/subpackageTwo/pages/addCompany/addCompany'
				})
			},
			openBingingPop() {
				uni.navigateTo({
					url: '/subpackageTwo/pages/addCompany/addCompany'
				})
			},
			async currentCompany() {
				currentCompanyApi().then(res => {
					if (res.code == 200) {
						if (res.data) {
							this.$refs.popup.close()
							this.isBinding = true
							uni.setStorageSync('isBinding', this.isBinding)
							this.company = res.data.companyName
							this.companyId = res.data.id // 存储公司ID
							uni.setStorageSync('companyInfo', res.data)

							// 调用汇总接口获取数据
							this.getHomeSummary()
						} else {
							uni.setStorageSync('isBinding', false)
							this.isBinding = false
							this.company = ''
							this.companyId = null
							uni.setStorageSync('companyInfo', '')
							this.$refs.popup.open()
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 10px;

		.navbar-left {
			.nav-back-content {
				display: flex;
				align-items: center;

				.nav-title {
					font-size: 34rpx;
					font-weight: bold;
					color: #1e88e5;
					margin-left: 16rpx;
				}
			}
		}

		// 新增：申报流程UI区（100%匹配UI图）
		.tax-report-section {
			padding: 16rpx 20rpx;
			background: #fff;
			border-radius: 10rpx;
			margin: 20rpx;
		}

		.report-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12rpx;
		}

		.report-time {
			font-size: 28rpx;
			color: #333;
		}

		.zero-report {
			display: flex;
			align-items: center;
			gap: 8rpx;
		}

		.zero-text {
			font-size: 28rpx;
			color: #4889ee;
			font-weight: bold;
		}

		.remain-time {
			font-size: 24rpx;
			color: #F16123;
			margin-bottom: 16rpx;
		}

		.start-record-btn {
			width: 120rpx;
			height: 56rpx;
			line-height: 56rpx;
			text-align: center;
			background: #E5F1FF;
			color: #4889ee;
			border: 1rpx solid #C3DDFE;
			border-radius: 8rpx;
			font-size: 24rpx;
			margin-bottom: 20rpx;
		}

		// 步骤条容器
		.step-bar {
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 100%;
		}

		// 单个步骤项
		.step-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8rpx; // 图标与文字箭头的间距
		}

		// 步骤图标
		.step-icon {
			width: 48rpx;
			height: 48rpx;
		}

		// 文字+箭头容器（同行）
		.step-text-arrow {
			display: flex;
			align-items: center;
			gap: 6rpx; // 文字与箭头的间距
		}

		// 步骤文字（未选中）
		.step-text {
			font-size: 22rpx;
			color: #999;
		}

		// 步骤文字（选中态：蓝色+蓝色下划线）
		.step-text-active {
			font-size: 22rpx;
			color: #4889ee !important; // 强制蓝色，防止被覆盖
			text-decoration: underline !important; // 强制下划线
			text-underline-offset: 4rpx; // 下划线距离文字4rpx
			text-decoration-thickness: 2rpx; // 下划线粗细
			text-decoration-color: #4889ee !important; // 下划线蓝色
		}

		// 步骤箭头
		.step-arrow {
			font-size: 24rpx;
			color: #999;
		}

		// 灰色连接线（步骤间）
		.step-line {
			width: 80rpx;
			height: 8rpx;
			background: #eee;
		}

		// 原有样式部分（完全保留）
		.top {
			margin: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 22rpx;
				color: rgba(121, 121, 121, 1);
				margin-top: 8rpx;
				letter-spacing: 2rpx;
			}

			.top-left {
				display: flex;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
				}

				.change {
					font-size: 28rpx;
					text-decoration-line: underline;
					color: rgba(65, 136, 239, 1);
					margin: 0rpx 8rpx;
				}

				.top-title {
					max-width: 580rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}

			.top-title {
				font-size: 30rpx
			}

			.login-box {
				width: 220rpx;
				height: 70rpx;
				border-radius: 34rpx;
				background: rgba(230, 242, 254, 1);
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					margin: 0;
					font-size: 28rpx;
					color: rgba(65, 136, 239, 1);
				}
			}

			.islogin {
				width: 100rpx !important;
				height: 50rpx !important;
			}
		}

		.moudle {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.moudle-left {
				width: 320rpx;
				height: 408rpx;
				border-radius: 10rpx;
				background: linear-gradient(110deg, rgba(47, 177, 247, 1) 0%, rgba(47, 177, 247, 0) 100%), rgba(65, 136, 239, 1);
				box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
				position: relative;
				overflow: hidden;

				.moudle-top {
					margin: 36rpx 0 0 36rpx;
					color: #fff;

					.title {
						font-size: 32rpx;
						font-weight: 600;
					}

					.day {
						font-size: 20rpx;
						display: flex;
						align-items: center;
						margin-top: 4rpx;

						.red {
							color: rgba(241, 97, 35, 1);
							font-size: 26rpx;
							margin: 0 6rpx;
							font-weight: 600;
						}
					}

					.btn {
						width: 50rpx;
						height: 22rpx;
						border-radius: 10rpx;
						background: rgba(255, 255, 255, 1);
						margin-top: 14rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 8rpx;
							height: 10rpx;
						}
					}
				}

				.bg-img {
					width: 280rpx;
					height: 302rpx;
					position: absolute;
					right: -30rpx;
					bottom: -16rpx;
				}
			}

			.moudle-right {
				width: 346rpx;
				height: 408rpx;

				.right-item {
					width: 346rpx;
					height: 192rpx;
					border-radius: 10rpx;
					background: linear-gradient(180deg, rgba(227, 238, 250, 1) 0%, rgba(227, 238, 250, 0) 100%), rgba(255, 255, 255, 1);
					box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
					position: relative;

					.moudle-top {
						margin-left: 38rpx;

						.title {
							font-size: 28rpx;
							font-weight: 600;
						}

						.day {
							font-size: 20rpx;
							display: flex;
							align-items: center;
							margin-top: 4rpx;
							color: rgba(128, 128, 128, 1);

							.red {
								color: rgba(241, 97, 35, 1);
								font-size: 26rpx;
								margin: 0 6rpx;
								font-weight: 600;
							}
						}

						.btn {
							width: 50rpx;
							height: 22rpx;
							border-radius: 10rpx;
							background: rgba(112, 167, 250, 1);
							margin-top: 14rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 8rpx;
								height: 10rpx;
							}
						}
					}

					.bg-img {
						width: 136rpx;
						height: 150rpx;
						position: absolute;
						right: -6rpx;
						bottom: 0;
					}
				}
			}
		}

		.housekeep-x {
			width: 100%;
			height: 138rpx;
			margin-top: 24rpx;
			display: flex;
			justify-content: space-between;

			.housekeep-box {
				width: 216rpx;
				height: 138rpx;
				border-radius: 10rpx;
				box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
				display: flex;
				justify-content: center;
				align-items: center;

				.housekeep-top {
					display: flex;
					align-items: center;

					text {
						font-size: 24rpx;
						line-height: 30rpx;
					}

					.img-bg {
						width: 60rpx;
						height: 60rpx;
						border-radius: 4rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}

				.housekeep-bottom {
					width: 190rpx;
					font-size: 20rpx;
					color: rgba(121, 121, 121, 1);
					text-align: center;
					margin-top: 16rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}

		.housekeep-y {
			width: 100%;
			height: auto;
			margin-top: 24rpx;

			.housekeep-item {
				height: 134rpx;
				border-radius: 16rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
				padding: 20rpx 30rpx 16rpx 26rpx;
				margin-bottom: 24rpx;

				.housekeep-top {
					width: 100%;
					height: 42rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.housekeep-title {
						display: flex;
						align-items: center;

						text {
							font-size: 26rpx;
							line-height: 42rpx;
						}

						.img-bg {
							width: 30rpx;
							height: 30rpx;
							border-radius: 4rpx;
							background: rgba(227, 238, 250, 1);
							display: flex;
							justify-content: center;
							align-items: center;
							margin-right: 10rpx;

							image {
								width: 20rpx;
								height: 20rpx;
							}
						}
					}

					.housekeep-btn {
						width: 138rpx;
						height: 42rpx;
						border-radius: 22px;
						background: rgba(65, 136, 239, 1);
						text-align: center;
						line-height: 42rpx;
						color: #FFF;
						font-size: 22rpx;
					}
				}

				.housekeep-bottom {
					width: 100%;
					margin-top: 18rpx;
					display: flex;
					justify-content: space-between;

					.housekeep-child {
						width: 190rpx;
						text-align: center;

						.child-one {
							font-size: 22rpx;
							color: rgba(128, 128, 128, 1);
						}

						.child-two {
							font-size: 20rpx;
							color: rgba(128, 128, 128, 1);
							margin-top: 6rpx;
						}

						.black {
							width: 190rpx;
							font-size: 26rpx;
							font-weight: 700;
							color: rgba(51, 51, 51, 1);
							margin-top: 6rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.orange {
							width: 190rpx;
							font-size: 26rpx;
							font-weight: 700;
							color: rgba(241, 97, 35, 1);
							margin-top: 6rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.green {
							width: 190rpx;
							font-size: 26rpx;
							font-weight: 700;
							color: rgba(8, 194, 146, 1);
							margin-top: 6rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.line {
						width: 2rpx;
						height: 30rpx;
						background: rgba(229, 229, 229, 1);
					}
				}
			}
		}

		.pop {
			width: 590rpx;
			height: 468rpx;
			border-radius: 24rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);

			.top-box {
				display: flex;
				justify-content: space-between;
				padding: 28rpx 28rpx 0 28rpx;

				image {
					width: 42rpx;
					height: 42rpx;
				}
			}

			.font {
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(51, 51, 51, 1);
				text-align: center;
				margin-top: 12rpx;
			}

			.bind-btn {
				width: 460rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 20rpx;
				background: rgba(65, 136, 239, 1);
				text-align: center;
				font-size: 32rpx;
				letter-spacing: 2rpx;
				color: #fff;
				margin: 82rpx auto 0 auto;
			}

			.close-btn {
				width: 460rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 20rpx;
				background: rgba(222, 235, 255, 1);
				text-align: center;
				font-size: 32rpx;
				letter-spacing: 2rpx;
				color: rgba(65, 136, 239, 1);
				margin: 22rpx auto 0 auto;
			}
		}
	}
</style>